<template>
    <el-row> 
        <!-- 显示具体的news的内容 -->
        <el-col :span="18">
            <div style="padding-right: 50px;box-sizing: border-box;">
                <!-- news 的本体内容展示 -->
                <div>
                    <h1>{{ newsInfo.name }}</h1>
                    <div style="font-size: 12px;">
                        <span class="news-tags">{{ newsInfo.tagName }}</span>
                        <span style="margin-left: 10px;">{{ parseTime(newsInfo.createTime) }}</span>
                    </div>
                    <div class="news-content" v-html="safeContent"></div>
                </div>
                <!-- 收藏按钮 -->
                <div class="button-container">
                    <el-button
                        round
                        :class="{'collected': isCollected}"
                        @click="toggleCollection"
                    >
                        {{ isCollected ? '已收藏' : '收藏' }}
                    </el-button>
                </div>
                <!-- 评论模块 -->
                <div>
                    <Evaluations :contentId="newsInfo.id" contentType="NEWS" />
                </div>
            </div>
        </el-col>
        <!-- 侧边显示具体的推荐咨询 -->
        <el-col :span="6">
            <el-col @click.native="newsItemClick(news)" :span="24" :key="index" v-for="(news, index) in newsTopList">
                <div style="padding: 25px 30px;box-sizing: border-box;">
                    <img :src="news.cover" :alt="news.name" style="width: 100%;height: 118px;border-radius: 5px;">
                    <h3 class="news-title">{{ news.name }}</h3>
                    <div style="font-size: 12px;">
                        <span class="news-tags">{{ news.tagName }}</span>
                        <span style="margin-left: 10px;">{{ parseTime(news.createTime) }}</span>
                    </div>
                </div>
            </el-col>
        </el-col>
    </el-row>
</template>
<script>
import { timeAgo } from "@/utils/data"
import Evaluations from "@/components/Evaluations.vue";
export default {
    components: { Evaluations },
    name: "NewsDetail",
    data() {
        return {
            newsInfo: {},
            newsTopList: [],
            // 默认没有收藏
            isCollected: false,
            userInfo:{},
        }
    },
    computed: {
           safeContent() {
               return this.newsInfo.content.replace(/<img/g, '<img style="max-width: 100%; height: auto;"');
           }
    },
    created() {
        // 第一件事：是不是拿到存起来的资讯数据？
        this.getStorageInfo();
        this.loadAllTopNews();
        
    },
    watch:{
        // 监听newsInfo的变化
        newsInfo(newValue, oldValue) {
            // 拿到资讯的id 去后端查询收藏的咨询
            this.newsSaveLoad();
        }
    },
    methods: {
        newsSaveLoad(){
            //拿到登陆用户的id 去后端查询收藏的咨询
            this.userInfo = JSON.parse(sessionStorage.getItem('userInfo'))
            const params = { userId: this.userInfo.id,newsId:this.newsInfo.id};
            this.$axios.post('/news-save/query', params).then(response => {
               const { data } = response;
               if (data.code === 200) {
                    this.newsSaveList = data.data;
                    //拿到数据，判断是否收藏
                    if (this.newsSaveList.length > 0) {
                        this.newsSaveList.forEach(item => {
                            if (item.id === this.newsInfo.id) {
                                this.isCollected = true;
                            }
                        })
                    }
               }
            })
        },
        //点击收藏按钮
        toggleCollection(){
            //根据状态改变
            if (this.isCollected) {
                //取消收藏
                this.cancelCollection();
            } else {
                //收藏
                this.addCollection();
            }
        },
        //取消收藏
        cancelCollection(){
            const params = { userId: this.userInfo.id,newsId:this.newsInfo.id};
            this.$axios.post('/news-save/delete', params).then(response => {
                const { data } = response;
                if (data.code === 200) {
                    this.isCollected = false;
                    this.$swal.fire({
                        title: '取消收藏',
                    })
                }
            })

        },
        // 收藏
        addCollection(){
            const params = { userId: this.userInfo.id,newsId:this.newsInfo.id};
            this.$axios.post('/news-save/save', params).then(response => {
                const { data } = response;
                if (data.code === 200) {
                    this.isCollected = true;
                    this.$swal.fire({
                        title: '收藏成功',
                        text: '您已成功收藏该资讯',
                        icon: 'success',
                        showConfirmButton: false,
                    })
                }
            })
        },
        newsItemClick(news){
            this.newsInfo = news;
        },
        // 转换时间
        parseTime(time) {
            return timeAgo(time);
        },
        getStorageInfo() {
            const newInfo = sessionStorage.getItem('newsInfo');
            this.newsInfo = JSON.parse(newInfo);
        },
        // 查询推荐资讯
        loadAllTopNews() {
            const newQueryDto = { isTop: true };
            this.$axios.post('/news/query', newQueryDto).then(response => {
                const { data } = response;
                if (data.code === 200) {
                    this.newsTopList = data.data;
                }
            })
        },
    }
};
</script>

<style scoped lang="scss">
.news-tags {
    display: inline-block;
    padding: 2px 5px;
    background-color: rgb(222, 243, 251);
    color: #1d3cc4;
    border-radius: 3px;
}
.news-content img {
       width: 100%;
       height: 100%;      
}
.button-container {
  position: fixed;
  top: 100px;
  left: 50px;
}
.collected {
  background-color: #409EFF; /* 收藏后的颜色 */
  color: white;
  border-color: #409EFF; /* 收藏后的边框颜色 */
}
</style>